<template>
	<view>
		<u-navbar title="登录" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder></u-navbar>
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<u--form labelPosition="left" :model="member" ref="form1">
					<u-form-item label="手机号" borderBottom ref="item1" labelWidth="120">
						<u--input v-model="member.phoneNumber" border="none" placeholder="请输入手机号"></u--input>
					</u-form-item>
					<u-form-item label="验证码" labelWidth="120" borderBottom>
						<u--input v-model="code" border="none" placeholder="请填写验证码"></u--input>
						<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini"
							:disabled="disabled1"></u-button>
					</u-form-item>
					<u-button type="primary" text="登陆" customStyle="margin-top: 50px" @tap="submit"></u-button>
				</u--form>
				<u-code ref="uCode" @change="codeChange" seconds="120" @start="disabled1 = true"
					@end="disabled1 = false"></u-code>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member: {},
				code: '',
				disabled1: false,
				tips: ''
			};
		},
		methods: {
			navigateBack() {
				uni.navigateBack()
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						console.log("ajax请求后台验证码")
						uni.request({
							url:'http://127.0.0.1:9009/msg/send2',
							data:{
								phone:this.member.phoneNumber
							},
							success:(res)=>{
								console.log(res)
								if(res.data.code==0){
									uni.$u.toast('验证码已发送');
								}else{
									uni.$u.toast('请输入正确手机号');
								}
							}
						})
						
						
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				alert("发送登陆请求");
				uni.request({
					url:"http://localhost:9009/api/member/phoneLogin",
					data:{
						phone:this.member.phoneNumber,
						code:this.code
					},
					success: (res) => {
						console.log(res)
						localStorage.setItem('token',res.data.data)
						if(res.data.data !=null){
							alert("456")
							uni.navigateTo({
								url:"../setmealOrder/setmealOrder"
							})
						}
						
					}
				})
				
			},
			
		}
	}
</script>

<style lang="scss">

</style>
